<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      :title="titleName"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="false"
      width="360px"
      center
    >
      <el-form :model="addFormData" :rules="rules" ref="formRef" label-position="right" label-width="auto">
        <el-form-item prop="start" label="开始日期" style="width:100%">
          <el-date-picker
            :picker-options="pickerDateBegin"
            class="datePicker"
            size="mini"
            v-model="addFormData.start"
            type="date"
            value-format="timestamp"
            placeholder="开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="end" label="结束日期" style="width:100%">
          <el-date-picker
            :picker-options="pickerDateEnd"
            class="datePicker"
            size="mini"
            v-model="addFormData.end"
            type="date"
            value-format="timestamp"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="submitLoading" icon="el-icon-check" @click="submit('formRef')">下 载</el-button>
          <el-button icon="el-icon-close" @click="handleClose">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "downloadForm",
  props: {
    formData: Object,
    showDialog: Boolean,
    editType: Number,
  },
  data() {
    return {
      addFormData: {
        projectId: "",
        start: "",
        end: ""
      },
      titleName: "下载数据",
      submitLoading: false,
      rules: {
        start: [{required: true, message: "请选择开始日期", trigger: "blur"}],
        end: [{required: true, message: "请选择结束日期", trigger: "blur"}]
      },
      pickerDateBegin: {
        disabledDate:(time)=> {
          let endDateVal = new Date(this.addFormData.end);
          if (endDateVal) {
            return time.getTime() >  endDateVal || time.getTime() < endDateVal - 3600 * 1000 * 24 * 30;
          } else {
            return time.getTime() > new Date().getTime() - 8.64e7;
          }
        }
      },
      pickerDateEnd: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  mounted() {
    this.addFormData.projectId = this.$route.query.projectId;
    this.addFormData.start = new Date().getTime() - 3600 * 1000 * 24;
    this.addFormData.end = new Date().getTime();
  },
  computed: {
    dialog: function () {
      return this.showDialog;
    },
  },
  methods: {
    // 取消事件
    handleClose() {
      this.$emit("downloadVisible", false);
    },
    submit(formName) {
      this.submitLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          window.open(
            process.env.VUE_APP_BASE_IBEM_API +
            `/v2/device/data/import/project/download.zip?projectId=` +
            this.addFormData.projectId +
            "&start=" +
            this.addFormData.start +
            "&end=" +
            this.addFormData.end
          );
          this.submitLoading = false;
          this.$emit("downloadVisible", false);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
